.rules {

  width: 750rpx;
  background-color: #f4f4f4;

  background: url('../../../assets/image/consumer-bg.png') no-repeat;
  background-size: cover;

  // padding: 40rpx 0;
  min-height: 100vh;
  position: absolute;
  padding-top: 58rpx;

  .content {
    margin: auto;
    width: 680px;
    // margin-top: 40rpx;
    // background: #FFFFFF;
    // box-shadow: 1px 2px 6px 0px rgba(154, 154, 154, 0.2);
    // border-radius: 8px;




    .hole-card {
      position: relative;
      overflow: hidden;
      margin: 0 auto;

      .rules-center {
        background-color: #fff;
        border: none;

        .rules-title {
          text-align: center;
          font-size: 36rpx;
          font-family: SourceHanSansCN;
          font-weight: 500;
          color: #FF6638;


        }

        .rules-text {

          font-size: 28rpx;
          font-family: PingFangSC;
          font-weight: 500;
          color: #343434;
          padding: 58rpx 45rpx;
        }

        .rules-btn {
          width: 580px;
          height: 90px;
          background: #FF6638;
          border-radius: 8px;

          font-size: 36rpx;
          font-family: SourceHanSansCN;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 90rpx;
          text-align: center;
          margin: auto;
        }

        // box-shadow: 1px 2px 6px 0px rgba(154, 154, 154, 0.2);
        // box-shadow: 1px 2px 6px 0px rgba(154, 154, 154, 0.2);
      }

      // 孔在下方
      .hole-down {
        // 卡片宽度
        width: 680px;
        overflow: hidden;

        // 可不要
        height: 58px;

        // 阴影 - 不需要就去掉
        // 3px 大小, 灰色阴影
        filter: drop-shadow(0 0 3px #fff);

        &::before {
          position: absolute;
          content: "";
          // 孔半径
          bottom: -40px;
          left: -40px;
          // 孔直径
          width: 80px;
          height: 80px;
          border-radius: 50%;

          // 白色背景，宽度 = 卡片宽度 - 孔直径
          box-shadow: 0 0 0 480px #fff;
          z-index: -1;
        }

        &::after {
          position: absolute;
          content: "";
          bottom: -40px;
          right: -40px;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          box-shadow: 0 0 0 480px #fff;
          z-index: -1;
        }

        // 卡片中间虚线 不需要就去掉
        // .middle-border {
        //   position: absolute;

        //   // 宽度 = 卡片宽度 - 孔直径
        //   width: 480px;
        //   // 左移孔半径
        //   left: 60px;
        //   bottom: 0;
        //   border: 1px dashed #ccc;
        // }
      }

      // 孔在上方
      .hole-up {
        width: 680px;
        overflow: hidden;
        filter: drop-shadow(0 0 0px #fff);

        height: 58px;

        &::before {
          position: absolute;
          content: "";
          top: -40px;
          left: -40px;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          box-shadow: 0 0 0 480px #fff;
          z-index: -1;
        }

        &::after {
          position: absolute;
          content: "";
          top: -40px;
          right: -40px;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          box-shadow: 0 0 0 480px #fff;
          z-index: -1;
        }
      }

      // // 遮盖上边阴影, 没有阴影则删掉
      // .cover-up {
      //   // 3px 为阴影宽度
      //   padding: 3px;
      //   padding-top: 0;
      //   overflow: hidden;
      // }

      // // 遮盖下边阴影
      // .cover-down {
      //   padding: 3px;
      //   padding-bottom: 0;
      //   overflow: hidden;
      // }
    }
  }
}
